<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二章 表格、列表</title>
</head>
<body>
    <h1>第二章 表格、列表</h1>

        <h2>2.1 表格</h2>
        <p>
            <table border="1">
                <caption><strong>表格属性</strong></caption>
                <colgroup>
                    <col span="1" style="background-color:red">
                    <col span="2" style="background-color:yellow">
                </colgroup>
                <!--页眉-->
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>标签</th>
                        <th>描述</th>
                    </tr>
                </thead>

                <tr>
                    <td>1</td>
                    <td>table</td>
                    <td>定义表格</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>th</td>
                    <td>定义表格的表头</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>tr</td>
                    <td>定义表格的行</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>td</td>
                    <td>定义表格单元</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>caption</td>
                    <td>定义表格标题</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>colgroup</td>
                    <td>定义表格列的组</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>col</td>
                    <td>定义用于表格列的属性</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>thead</td>
                    <td>定义表格的页眉</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>tbody</td>
                    <td>定义表格的主体</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>tfoot</td>
                    <td>定义表格的页脚</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>colspan</td>
                    <td>列数</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>rowspan</td>
                    <td>行数</td>
                </tr>
            </table>
        </p>

        <p>
            <table border="1">
                <tr>
                    <th>部门</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>工资</th>
                </tr>
                <tr>
                    <td rowspan="4">开发组</td>
                    <td>小明</td>
                    <td>男</td>
                    <td>1w</td>
                </tr>
                <tr>
                    <td>小红</td>
                    <td>女</td>
                    <td>1.5w</td>
                </tr>
                <tr>
                    <td>小强</td>
                    <td>男</td>
                    <td>2w</td>
                </tr>
                <tr>
                    <td colspan="2">合计</td>
                    <td>4.5w</td>
                </tr>
            </table>
        </p>

        <h2>2.2 列表</h2>

        <p>
            有序列表：
            <ol>
                <li>Coffee</li>
                <li>Milk</li>
                <li>Juice</li>
            </ol>
            无序列表：
            <ul>
                <li>Coffee</li>
                <li>Milk</li>
                <li>Juice</li>
            </ul>
            自定义列表：
            <dl>
                <dt><strong>Coffee</strong></dt>
                <ul>
                    <li>black</li>
                    <li>drink</li>
                </ul>

                <dt><strong>Milk</strong></dt>
                <ol>
                    <li>write</li>
                    <li>drink</li>
                </ol>

                <dt><strong>Juice</strong></dt>
                <dd>color drink</dd>
            </dl>
        </p>

        <h2>2.3 表单</h2>
        <form action="base.html" target="_blank" method="get">
            姓名 <input type="text" name="usename" >
            <br />
            <br />
            性别 <input type="radio" name="sex" value="male"> 男
                 <input type="radio" name="sex" value="female"> 女
            <br />
            <br />
            手机号 <input type="tel" name="phonenum">
            <br />
            <br />
            证件类型 <select name="idtype">
                        <option name="id" value="identity card"> 身份证</option>
                        <option name="id" value="passport"> 护照</option>
                     </select>
            <br />
            <br />
            证件号码<input type="number" name="idnum">
            <br />
            <br />
            出生日期<input type="date" name="birthday">
            <br />
            <br />
            血型<select>
                    <option name="blood" value="O">O</option>
                    <option name="blood" value="A">A</option>
                    <option name="blood" value="B">B</option>
                    <option name="blood" value="AB">AB</option>
                </select>
            <br />
            <br />
            邮箱 <input type="email" name="email">
            <br />
            <br />

            <input type="submit" value="提交"><br />
        </form>
</body>
</html>